<template>
<div class="pager-header page-max-width">
  <h1 class="logo">{{title}}</h1>
  <div class="search-box" v-if="showSearch">
    <input class="onfoucus" maxlength="10" v-model="searchKeyword" placeholder="输入词根、前缀、后缀，回车搜一下…" clearable/>
    <Search class="search-icon" theme="outline" size="16" fill="#333"/>
  </div>
  <div class="user-info">
    <router-link to="/ucenter/index">itshizhan</router-link>
  </div>
</div>
</template>

<script lang="ts">
import { defineComponent, ref} from 'vue'
import { Search } from "@icon-park/vue-next"
export default defineComponent({
  name:'PageHeader',
  components:{
    Search
  },
  props:{
    title:{
      type: String,
      require:true
    },
    showSearch:{
      type:Boolean,
      default: true
    }
  },
  setup() {
    const searchKeyword = ref("")
    return {
      searchKeyword
    }
  }
})
</script>
<style lang="scss">
.pager-header{
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #f0f0f0;
  background: #ffffff;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  position: sticky;
  align-items: center;
  top: 0;
  h1.logo{
    font-size: 26px;
    font-weight: bold;
  }
  .user-info{
    cursor: pointer;
  }
  .search-box{
    height: 41px;
    margin-right: 200px;
    background: #fff;
    border-radius: 10px;
    position: relative;
    input {
      width: 320px;
      height: 41px;
      display: inherit;
      border: none;
      padding: 0 40px;
      border-radius: 10px;
      box-shadow: 0 0px 1px 0 #e0043c, 0 -1px 3px -1px #f4f5f5;
      transition:width 1s;
      &:focus{
        box-shadow: 0 0px 1px 0 #e0043c, 0 -1px 3px -1px #ec043f;
        width: 380px;
      }
    }
    .search-icon{
      position: absolute;
      left: 10px;
      top: 12px;
    }
  }
}
</style>